<script setup>
import {Tabs, TabPane} from "view-ui-plus";
import {reactive, onMounted, inject, ref, watch} from "vue";
import DimAndTargetTable from "./DimAndTargetTable.vue";

//================================================【公用相关】============================================================
// 当前激活页签下标
const currentActiveIndex  = ref('')
//父组件控制页签对象 --拷贝版本
let fatherControlPaneName_copy = reactive({})
//================================================【组件通信】============================================================
//请求方法
const context = inject('context')
const {currAbcModelGuid} = inject('abcmodel')
const props = defineProps({
    type:{
        type: Number,
    },
    //由 父组件 控制的 激活页签名称
    fatherControlPaneName:{
        type:Object,
        required:false
    }
});
//================================================【组件属性】============================================================
watch(()=>props.fatherControlPaneName,(newValue)=>{
    if (fatherControlPaneName_copy !== undefined){
        fatherControlPaneName_copy = newValue
    }
},{deep:true,immediate:true})
watch(()=>props.type,()=>{
    currentActiveIndex.value = ''
    init()

    if (fatherControlPaneName_copy !== undefined && fatherControlPaneName_copy.type === props.type) {
        currentActiveIndex.value = fatherControlPaneName_copy.name
    }else {
        //情况：首次 由总览进入 分摊维度 第二页签，
        // 后点击顶部页签 进入 成本对象 某一页签，
        // 后点击顶部 分摊维度 页签，此时本应跳转到 分摊维度 第一个页签，需将父组件传来的对象 初始化
        fatherControlPaneName_copy === undefined
    }
},{deep:true,immediate:true})

//当页签切换时，需要加载最新数据
watch(()=>currentActiveIndex.value,()=>{
    init()
})
//================================================【普通方法】============================================================
//==================================================================【初始化】
async function init() {
    await initTabs();
}
//==================================================================【初始化页签】
//创建页签列表(存储所有动因分组)
const tabs = reactive([])
async function initTabs(){
    // 访问后端获取数据
    await context.getPlugin('http').post(`abc/model/dimension/byDimType/${currAbcModelGuid.value}/${props.type}`).then((res) => {
        tabs.splice(0,tabs.length,...res.data.tabList)
        //设置当前激活页签
        if (tabs.length > 0)
            currentActiveIndex.value === ''? tabs[0].key : currentActiveIndex.value
    })
}

//================================================【生命周期】============================================================
onMounted(()=>{
  init()
})
</script>

<template>
    <j-layout class="layout">
        <j-content >
            <Tabs type="card"
                  :animated="false"
                  v-model:model-value="currentActiveIndex"
                  @on-click="handleClick"
            >
                <TabPane
                        v-for="(tab, index) in tabs"
                        :key="index"
                        :name='tab.key'
                        :label="tab.title">

                    <DimAndTargetTable
                        :member-count="tab.memberCount"
                        :ncell-data="tab.memberVoList"
                        :type="props.type"
                        style="margin-top: 10px"
                    >
                    </DimAndTargetTable>
                </TabPane>
            </Tabs>
        </j-content>
    </j-layout>
</template>

<style lang="less" scoped>
/*页签组件包括 导航栏、页签内容*/
.ivu-tabs {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;

  /*底部导航栏整体*/
  :deep(.ivu-tabs-bar) {
    margin-top: 0px !important;
    border-bottom: 0px solid #d1d1d1 !important;
    margin-bottom: 0px !important;
    border-top: 0px solid #d1d1d1;
    display: flex;

    /*左侧 页签*/
    .ivu-tabs-nav-container{
      order: 1;
      .ivu-tabs-tab-active {
        z-index: 9;
      }
      .ivu-tabs-ink-bar {
        top: 0px;
      }
      .ivu-tabs-tab {
        margin-right: 0px !important;
        border-radius: 0 0 0 0 !important;
      }
    }
  }
  /*页签内容*/
  :deep(.ivu-tabs-content) {
    height: 100%;
  }

}
</style>
